<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>支付订单</title>
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/base.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/header.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/public.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/payOrder.css" />
<style type="text/css">
.myAlert_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100000;
}

.myAlert_content {
	width: 150px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100001;
	background-color: white;
	margin-left: -75px;
	margin-top: -50px;
	border-radius: 5px;
}

.myAlertContent_line1 {
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-bottom: 1px solid #EBEBEB;
	font-size: 13px;
}

.myAlertContent_line2 {
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 13px;
}

.asd {
	margin-top: -10px;
}

.logo_text {
	height: 40px;
	line-height: 40px;
	display: inline-block;
	color: #595b60;
	font-size: 14px;
	margin-left: 6px;
	float: left;
}
/*预约时间*/
.bespoke {
    display:none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	line-height: 30px;
	overflow: hidden;
	color: #909090;
	background: rgba(166, 166, 166, 0.73);
	font-size: 14px;
	z-index: -999;
}

.bespoke h3 {
	font-size: 18px;
	color: #646464;
	margin-top: .5rem;
}

.bespoke h2 {
	color: #fc83a6;
	font-size:18px;
}

.bespoke h4 {
	font-size: 15px;
	font-weight: 600;
	 padding-top: .3rem;
}

.bespoke h4::before, .bespoke h4::after {
	display: inline-block;
	content: "";
	width: .9rem; height : .9rem;
	background: url(/static/app/img/201804261113.png) no-repeat;
	background-size: cover;
	vertical-align: -.1rem;
	height: .9rem;
}

.bespoke h4::before {
	margin-right: .5rem;
}

.bespoke h4::after {
	margin-left: .5rem;
}

.bespoke-content {
	position: absolute;
	top: 4.5rem;
	left: 0;
	right: 0;
	background: #fff;
	width:85%;
	margin: auto;
	text-align: center;
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
		border-radius: 16px;
}

.bespoke-logo {
	display: block;
    width: 2.6rem;
    height: 2.1rem;
	background: url(/static/app/img/wxpay.png) no-repeat;
	background-size: cover;
	margin-left: 9rem;
}

.complete-tel {
	    display: block;
    width: 68%;
    height: 2.2rem;
    line-height: 2.2rem;
    margin: auto;
    color: #fff;
    border-radius: 6px;
    background: #f797b7;
}

.complete-tel::before {
	display: inline-block;
    content: "";
    width: .9rem;
    height: 1.1rem;
    background: url(/static/app/img/201804261128.png) no-repeat;
    background-size: cover;
    vertical-align: -.3rem;
    margin-right: .5rem;
}

.complete-close {
    display: block;
    width: 68%;
    height: 2.2rem;
    line-height: 2.2rem;
    margin: auto;
    color: #99e5f8;
    border: 1px solid;
    border-radius: 20px;
    margin-top: 2.4rem;
    font-size: 16px;
}
.bespoke-matter h4::before,.bespoke-matter h4::after{
   display: inline-block;
   content: "";
   width: .9rem;
   height: .7rem;
   background: url(/static/app/img/201804261149.png) no-repeat;
   background-size: cover;
   vertical-align: initial;
}
#timer{
    color: #f797b7;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
    height: 2.4rem;
    line-height: 2.4rem;
    width: 68%;
    font-size: 24px;
}
.bespoke-matter,.bespoke-service{
    border-top:1px solid #ededed;
    margin-top: 1rem;
    
  
}
.bespoke-matter p{
  padding: 1.3rem;
}
.bespoke-service p:FIRST-OF-TYPE {
	    margin-top: .8rem;
}
.bespoke-service p:NTH-OF-TYPE(2){
    width: 75%;
    line-height:1.5rem;
    text-align: center;
    margin: auto;
    margin-bottom: .5rem;
    }
</style>
	</head>
	<body>
		<div class="content">
			<div class="header">
				<span class="back" onclick="javascript:history.go(-1);"></span>
				<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
				<span class="logo_text">OK 妈咪</span>
			</div>
			<div class="payOrder-num">
				<span class="fL money_txt asd">订单编号</span>
				<span class="fR money_num asd">${orderNum}</span>
			</div>
			<div class="payOrder-money">
				<span class="fL money_txt">订单金额</span>
				<span class="fR money_num"><c:if test="${payType=='3'}"><c:if
					test="${pointType==1 }">商品积分</c:if>
				<c:if test="${pointType==2 }">健康积分</c:if>
				<c:if test="${pointType==3 }">教育积分</c:if>${jifn}+</c:if> ¥${amount}</span>
			</div>
			<div class="payOrder-way">
				<div class="way-title">选择支付方式</div>
				<div class="way way-wx">
					<span class="fL wx-img"></span>
					<span class="fL">微信支付</span>
					<span class="fR select isSelect" id="1"></span>
				</div>
				<div class="way way-wx">
					<span class="fL wx-img"></span>
					<span class="fL">余额支付（${uamount }）</span>
					<span class="fR select " id="2"></span>
				</div>
			</div>
			<div class="payOrder" id="payOrder">
				<input type="button" class="payOrder-btn payType" onclick="doPrePay();" style="border:1px solid #0093dd" value="确认支付">
			</div>	
			<div class="payOrder2" id="payOrder2">
				<input type="button" class="payOrder-btn payType2" onclick="ddPrePay();" style="border:1px solid #0093dd" value="确认支付">
			</div>
		</div>
	<!-- 预约时间 -->
	<div class="bespoke">
		<div class="bespoke-content">
			<i class="bespoke-logo"></i>
			<h3>你已支付成功</h3>
			<p>你的订单编号为：${orderNum}</p>
			<!-- 实物类商品预约 -->
			<c:if test="${order.goodtype==1}">
				<div class="bespoke-matter">
					<P>请预约到店取货时间，我们备货等你来哦</P>
					<h4>预约到店时间${goodtype}</h4>
					<input type="text" id="timer">
					<span class="complete-close">完成</span>
				</div>
			</c:if>
            <!-- 服务类商品预约 -->
			<c:if test="${order.goodtype==2}">
				<div class="bespoke-service">
					<P>现在就来预约吧，我们等你来哦</P>
					<h4>预约店铺${goodtype}</h4>
					<h2>${order.title}</h2>
					<P>${order.address}</P>
					<a href="tel:${order.tell}" class="complete-tel complete-sub">电话预约时间</a>
					<span class="complete-close">完成</span>
				</div>
			</c:if>
		</div>
	</div>
		<!-- include -->
		<%@include file="../include.jsp"%>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/myAlert/module.js"></script>
		<!-- 时间选择插件 -->
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		   <script type="text/javascript" src="${BASE_PATH}/static/app/js/datePicker.js"></script>
		<script type="text/javascript">
		$("#payOrder2").hide();
		$('.select').click(function(){
			$(this).toggleClass('isSelect');
			var id = $(this).attr("id"); 
			if(id==1){
				$("#payOrder2").hide();
				$("#payOrder").show();
			}else if(id==2){
				$("#payOrder").hide();
				$("#payOrder2").show();
			}
			$(this).parent().siblings('.way').children('.select').removeClass('isSelect');	
		})
		//确认支付按钮
		$('.payOrder-btn').click(function(){
			
		})
		wx.config({appId: '${appId}',timestamp: '${timestamp}',nonceStr: '${nonceStr}',signature: '${signature}',jsApiList: ['chooseWXPay']});
		function doPrePay(){
			var pay=document.querySelector(".payType");
			    pay.setAttribute("disabled", true);
			Kit.ajax.post("${BASE_PATH}/order/doPrePay",{orderNum:"${orderNum}",flag:1},function(result){
				if(result.flag==0){
					wx.chooseWXPay({
						appId: '${appId}',
					    timestamp: result.object.timeStamp,
					    nonceStr: result.object.nonceStr,
					    package: result.object.package,
					    signType: result.object.signType,
					    paySign: result.object.paySign,
					    success: function (res) {
					    	if(res.errMsg == "chooseWXPay:ok"){
					    		/* Kit.ui.alert("支付成功",function(){
									turnToOrderList("${orderNum}");
								}); */
								Kit.ajax.post("${BASE_PATH}/order/doPrePaySuccess",{orderNum:"${orderNum}"},function(result){
									$(".bespoke").show();
									$(".bespoke").css("z-index","999");
								})			    		
					    	}else if(res.errMsg == "chooseWXPay:cancel"){
					    		Kit.ui.alert("支付被取消！");
					    		pay.setAttribute("disabled", false);
					    		turnToOrderList("${orderNum}");
					    	}else if(res.errMsg == "chooseWXPay:fail"){
					    		var popup = '<div class="app-result-wrapper am-text-center"><i class="am-icon-close am-text-danger" style="font-size:100px;"></i><div>支付失败！</div></div><a href="javascript:turnToOrderList();" class="am-btn am-btn-danger am-btn-block am-radius app-m-t-10">关闭</a>';
								Kit.ui.popup(popup,"padding:10px;width:90%;");
					    	}
					    }
					});
				}else{
					pay.setAttribute("disabled", false);
					Kit.ui.alert("支付失败！",function(){
						turnToOrderList("${orderNum}");
					});
				}
			});
		}
		function ddPrePay(){
			var pay=document.querySelector(".payType2");
		    pay.setAttribute("disabled", true);
		    
			var amount=${amount};
			var money=${uamount};
			var pointType="${pointType}";
			if(amount>money){
				myAlert.alert("您的余额不足");
			    pay.setAttribute("disabled", false);
				return;
			}else{
				Kit.ajax.post("${BASE_PATH}/order/ddPrePay",{orderNum:"${orderNum}",flag:1,pointType:pointType},function(result){
					if(result.flag==0){
						/* Kit.ui.alert("支付成功",function(){
							turnToOrderList("${orderNum}");
						}); */
						$(".bespoke").show();
						$(".bespoke").css("z-index","999"); 
					}else{
						  pay.setAttribute("disabled", false);
						Kit.ui.alert("支付失败！",function(){
							turnToOrderList("${orderNum}");
						});
					}
				});
			}
		}
	function turnToOrderList(orderNum){
		Kit.render.redirect("${BASE_PATH}/order/detail/"+orderNum);
	}
	$(function(){ 
		pushHistory(); 
		  var bool=false;  
            setTimeout(function(){  
                  bool=true;  
            },1000); 
		window.addEventListener("popstate", function(e) { 
			if(bool){
				turnToOrderList("${orderNum}");
			}
			}, false); 
			function pushHistory() { 
				var state = { 
				title: "title", 
				url: "#"
				}; 
			window.history.pushState(state, "title","#" ); 
		} 
	});
	/* 预约显示与影藏 */
	$(".complete-close").click(function() {
		$(".bespoke").hide();
		$(".bespoke").css("z-index","-999");
        var  orderNum="${orderNum}";	
	 
      //点击跳转订单详情页
		var bespokeDate= $("#timer").val();
		
        if(bespokeDate){
    	   //预约时间不为空
    	   location.href="${BASE_PATH}/order/detailComplete/?orderNum="+ orderNum+"&bespokeDate="+bespokeDate;	
       }else{
    	   //预约时间为空
    	   location.href="${BASE_PATH}/order/detailComplete/?orderNum="+ orderNum;
       } 
	   
	});
	//下单时间
 	var	startDateS=new Date("${order.startDate}");  	
 	var timer=$id("timer");
	if(timer){
		var calendar = new datePicker();
		calendar.init({
			'trigger': '#timer', /*按钮选择器，用于触发弹出插件*/
			'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
			'minDate':'1900-1-1',/*最小日期*/
			'maxDate':'2100-12-31',/*最大日期*/
			'onSubmit':function(){/*确认时触发事件*/
				var theSelectData=calendar.value,
			    today=new Date(calendar.value),//选择预约时间
			    startDate=startDateS.getTime(),//下单时间
			    endDate=startDateS.getTime()+(7*24*60*60*1000);//限制预约时间最大为下单时间7天
			    //预约时间的时分秒
			    today.setHours(startDateS.getHours());
			    today.setMinutes(startDateS.getMinutes());
			    today.setSeconds(startDateS.getSeconds());
			  
			    if(today.getTime()<startDate  ){
			    	$("#timer").val("");
					Kit.ui.alert("预约时间不能小于下单时间 ");
			    }else if(today.getTime()>endDate){
					$("#timer").val("");
					Kit.ui.alert("预约时间不能大于下单时间7天");
				}
			  },
			'onClose':function(){/*取消时触发事件*/
			}
		});
	}
	
		/*
		 *获取id
		*/
		function $id(id){
			return document.getElementById(id);
		}
	</script>
	</body>
</html>